<template>
  <van-cell-group class="item">
    <div class="header-date">
      <div>{{ bill.date }}</div>
      <div class="money">
        <span><b>支</b>{{ expense.toFixed(2) }}</span>
        <span><b>收</b>{{ income.toFixed(2) }}</span>
      </div>
    </div>
    <van-cell
      v-for="(v, i) in bill.bills"
      :key="i"
      :title="v.type_name"
      :value="`${v.pay_type == 1 ? '-' : '+'}${v.amount}`"
      :label="`${timeFomater(v.date)}${v.remark ? ' | ' + v.remark : ''}`"
      @click="goToDetail(v)"
    />
  </van-cell-group>
</template>

<script>
import { reactive, toRefs } from 'vue'
import { useRouter } from 'vue-router'
import dayjs from 'dayjs'
export default {
  name: 'CardItem',
  props: {
    bill: {
      type: Object,
      default: {}
    }
  },
  setup(props) {
    const router = useRouter()
    const state = reactive({
      income: 0,
      expense: 0
    })
    //总收入
    state.income = props.bill.bills
      .filter((v) => v.pay_type == 2)
      .reduce((acc, cur) => {
        acc = acc + Number(cur.amount)
        return acc
      }, 0)
    //总支出
    state.expense = props.bill.bills
      .filter((v) => v.pay_type == 1)
      .reduce((acc, cur) => {
        acc = acc + Number(cur.amount)
        return acc
      }, 0)
    const timeFomater = (time) => {
      return dayjs(time).format('HH:mm')
    }
    const goToDetail = (item) => {
      console.log(item)
      router.push({
        path: '/navbar/detail',
        query: {
          id: item.id
        }
      })
    }

    return {
      ...toRefs(state),
      timeFomater,
      goToDetail
    }
  }
}
</script>

<style lang="less" scoped>
.item {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);
  margin-bottom: 10px;
  .header-date {
    height: 60px;
    display: flex;
    background-color: var(--bg-color2);
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    font-size: 12px;
    div {
      color: var(--text-color1);
    }
    .money {
      span {
        margin-left: 20px;
        b {
          color: var(--text-color1);
          font-weight: normal;
          background-color: var(--bg-color1);
          padding: 3px;
          margin-right: 2px;
        }
      }
    }
  }
}
</style>
